import { getSubDesc } from '@/common/utils';
import { ScrollView, View } from '@tarojs/components';
import classNames from 'classnames';
import React, { ForwardedRef, useEffect, useImperativeHandle, useState } from 'react';
import styles from './index.module.less';

type DateListPropsType = {
    data: string[];
    prev: string;
    value?: string;
    onChange?: (date: string) => void;
};
export type DateListRefType = {
    selectNext: () => void;
};

function DateList(props: DateListPropsType, ref: ForwardedRef<DateListRefType>) {
    const { data: propsData, onChange, value, prev } = props;
    const [activeDate, setActiveDate] = useState<string | undefined>(value);

    const [data, setData] = useState<string[]>(propsData);

    useEffect(() => {
        propsData && !activeDate && setActiveDate(propsData[0]);
    }, [propsData, activeDate]);

    const [scrollIntoView, setScrollIntoView] = useState<string>();
    useEffect(() => {
        if (propsData && activeDate) {
            let res: string[] = [];
            if (!propsData.includes(activeDate)) {
                res = propsData.concat(activeDate).sort();
            } else res = propsData;
            // h5 端渲染逻辑存在问题，需要重置再渲染，否则顺序不对
            if (process.env.TARO_ENV === 'h5') {
                setData([]);
                const timmer = setTimeout(() => setData(res), 20);
                return () => clearTimeout(timmer);
            } else setData(res);
        }
    }, [propsData]);

    useEffect(() => {
        // setScrollIntoView(undefined)
        setScrollIntoView(value);
        const timmer = setTimeout(() => setScrollIntoView(value), 20);
        return () => clearTimeout(timmer);
    }, [data]);

    useEffect(() => {
        setScrollIntoView(activeDate);
        activeDate && onChange && onChange(activeDate);
    }, [activeDate, onChange]);

    useImperativeHandle(
        ref,
        () => {
            return {
                selectNext: () => {
                    if (!data || !data.length || !activeDate) return;
                    const activeIndex = data.findIndex((item) => item === activeDate);
                    if (data[activeIndex + 1]) return setActiveDate(data[activeIndex + 1]);
                    setActiveDate(data[0]);
                },
            };
        },
        [data, activeDate]
    );

    return (
        <ScrollView
            scrollX
            className={styles.dateList}
            scrollIntoView={`${prev}-${scrollIntoView}`}
        >
            <View className={styles.dateListPage}>
                {data.map((item) => {
                    const isActive = item === activeDate;
                    return (
                        <span
                            id={`${prev}-${item}`}
                            key={item}
                            className={classNames(styles.item, { [styles.active]: isActive })}
                            onClick={() => setActiveDate(item)}
                        >
                            {getSubDesc(item, true)}
                            <div className={styles.line}></div>
                        </span>
                    );
                })}
            </View>
        </ScrollView>
    );
}

export default React.forwardRef<DateListRefType, DateListPropsType>(DateList);

export const EmptyCard = (props: { selectDate: string | undefined; handleClick: () => void }) => {
    const { selectDate, handleClick } = props;
    if (!selectDate) return null;
    return (
        <div className={styles.emptyCard}>
            <div className={styles.emptyText}>{getSubDesc(selectDate, false)}暂无场次</div>
            <div className={styles.emptyBtn} onClick={handleClick}>
                看看其它日期
            </div>
        </div>
    );
};
